<template>
	<div class="partners-contents">
		<div class="partners">
			<div class="partners-title-box">
				<div class="partners-title">
					{{$t("homeTitle.partners")}}
				</div>
			</div>
			<div class="accordion-show">
				<div class="accordion">
					<div class="accordion-item">
						<div class="accordion-model"></div>
						<div class="accordion-box">
							<div class="accordion-header">{{$t("partners1.name")}}</div>
							<div class="accordion-content">
								<p>{{$t("partners1.info")}}</p>
							</div>
						</div>
					</div>
					<div class="accordion-item">
						<div class="accordion-model"></div>
						<div class="accordion-box">
							<div class="accordion-header">{{$t("partners2.name")}}</div>
							<div class="accordion-content">
								<p>{{$t("partners2.info")}}</p>
							</div>
						</div>
					</div>
					<div class="accordion-item">
						<div class="accordion-model"></div>
						<div class="accordion-box">
							<div class="accordion-header">{{$t("partners3.name")}}</div>
							<div class="accordion-content">
								<p>{{$t("partners3.info")}}</p>
							</div>
						</div>
					</div>
					<div class="accordion-item">
						<div class="accordion-model"></div>
						<div class="accordion-box">
							<div class="accordion-header">{{$t("partners4.name")}}</div>
							<div class="accordion-content">
								<p>{{$t("partners4.info")}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		name: "partnerss",
		data() {
			return {

			};
		},
		mounted() {
			this.toggleAccordion()
			window.addEventListener("scroll", this.scrolling);
		},
		methods: {
			scrolling() {
				if (document.querySelector(".partners-title-box")) {
					var titleBox = document.querySelector(".partners-title")
					var accordionShow = document.querySelector(".accordion-show")
					var height = document.documentElement.scrollTop
					// 显示标题
					if (document.documentElement.scrollTop > 1570) {
						titleBox.style.display = "block"
						titleBox.style.animation = "fadeInDown 0.5s linear"
					}
					// 设备
					if (document.documentElement.scrollTop > 1950) {
						accordionShow.style.display = "block"
						accordionShow.style.animation = "show 1.5s linear"
					}
					// 去除已经执行过的动画
					var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
					var scroll = scrollTop - this.i;
					this.i = scrollTop;
					if (scroll < 0) {
						if (height < 1390) {
							titleBox.style.display = "none"
							accordionShow.style.display = "none"
						}
					}
				}
			},
			toggleAccordion(index) {
				var accordionItems = document.querySelectorAll('.accordion-item');
				accordionItems.forEach((i) => {
					i.addEventListener('mouseover', function(event) {
						// 当鼠标移入元素时的处理函数
						setTimeout(() => {
							i.style.width = "100%"
						}, 200)
					});

					i.addEventListener('mouseout', function(event) {
						// 当鼠标移出元素时的处理函数
						setTimeout(() => {
							i.style.width = "25%"
						}, 200)
					});
				})
			}
		}

	}
</script>


<style>
	.partners-contents {
		margin-top: 80px;
		width: 100%;
		height: 600px;
		display: flex;
		justify-content: center;

	}

	.accordion-show {
		display: none;
	}

	/* 标题 */
	.partners-title-box {
		color: #fff;
		height: 165px;
	}

	.partners-title {
		font-size: 25px;
		font-weight: 600;
		text-align: center;
		display: none;
		font-size: 48px;
		margin: 0 0 100px 0;
		letter-spacing: 5px;
		font-family: "Ali";
	}

	.partners {
		color: #fff;
		padding: 20px 0;
		width: 100%;
	}

	.accordion {
		display: flex;
	}

	.accordion-model {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
		z-index: 1;
	}

	.accordion-item:nth-child(1) {
		background-color: #2797ff;
		background-image: url('../../../static/img/banner3.jpg');
	}

	.accordion-item:nth-child(2) {
		background-color: #ff6021;
		background-image: url('../../../static/img/banner5.jpg');
	}

	.accordion-item:nth-child(3) {
		background-color: #1faa00;
		background-image: url('../../../static/img/body_bac.jpg');
	}

	.accordion-item:nth-child(4) {
		background-color: #84aaa3;
		background-image: url('../../../static/img/banner2.jpg')
	}

	.accordion-item {
		width: 25%;
		height: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border: 2px solid #fff;
		transition: 0.5s;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
	}

	.accordion-box {
		z-index: 2;
	}

	.accordion-header {
		font-size: 25px;
		font-weight: 600;
		line-height: 60px;
	}

	.accordion-content {
		color: #e1e1e1;
		font-size: 15px;
	}
</style>
